<template>
  <view class="merchant-order-detail">
    <!-- 页面标题栏 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <image src="/static/Images/goods/Fanhui.png" class="back-icon"></image>
      </view>
      <view class="header-title">订单详情</view>
      <view class="header-right"></view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">数据加载中...</text>
      </view>
    </view>
    
    <!-- 状态栏 -->
    <view class="status-bar" :class="statusBarClass">
      <view class="status-icon">
        <image :src="statusIconSrc" class="status-icon-img"></image>
      </view>
      <view class="status-text">
        <text class="status-title">{{ statusTitle }}</text>
        <text class="status-desc">{{ statusDesc }}</text>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-item">
        <text class="info-label">用户订单ID:</text>
        <text class="info-value order-id">{{ orderInfo.orderNo }}
          <img class="copy-icon" src="/static/Images/Common/Fuzhi.png" alt="">
        </text>
      </view>
      <view class="info-item">
        <text class="info-label">业务渠道:</text>
        <text class="info-value">{{ orderInfo.orderType }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">成功后可结算金额:</text>
        <text class="info-value settlement-amount">{{ orderInfo.settlementAmount }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">领单时间:</text>
        <text class="info-value">{{ orderInfo.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">截止时间:</text>
        <text class="info-value">{{ orderInfo.finishTime || '--' }}</text>
      </view>
    </view>

    <!-- 充值信息 -->
    <view class="info-section">
      <view class="section-title">充值信息</view>
      <view class="recharge-info">
        <view class="recharge-item">
          <text class="recharge-label">账号类型:</text>
          <text class="recharge-value" v-if="rechargeInfo.orderType === 1">{{ rechargeInfo.firstItem ? (rechargeInfo.firstItem.address + ' | ' + rechargeInfo.firstItem.carrier) : '' }}</text>
          <text class="recharge-value" v-else-if="rechargeInfo.orderType === 3">{{ accountTypeName }}</text>
          <text class="recharge-value" v-else>{{ rechargeInfo.firstItem ? rechargeInfo.firstItem.address : '' }}</text>
        </view>
        <view class="recharge-item">
          <text class="recharge-label">充值平台:</text>
          <text class="recharge-value platform-info">
            <text class="platform-tag">{{ getChannelName(orderData.list && orderData.list[0] ? orderData.list[0].channel_ids : null) }}</text>
            <text class="modify-btn" @click="showChannelSelector">修改</text>
          </text>
        </view>
        <view class="platform-tip">
          <text class="tip-text">提示：如充值平台选择错误，可以点击修改</text>
        </view>
        <view class="recharge-item">
          <text class="recharge-label">充值账号:</text>
          <text class="recharge-value account-number">
            {{ rechargeInfo.phone }}
            <img class="copy-icon" src="/static/Images/Common/Fuzhi.png" alt="">
          </text>
        </view>
        <view class="recharge-item">
          <text class="recharge-label">详细信息:</text>
          <text class="recharge-value">{{ rechargeInfo.details }}</text>
        </view>
      </view>
    </view>
    <view class="info-section">
      <!-- 已上传凭证展示 -->
      <view class="uploaded-proof-section" v-if="orderStatus !== 'pending'">
        <view class="section-title">
          <text>已上传凭证</text>
        </view>
        <view class="uploaded-images-container">
          <view class="uploaded-image-item" v-for="(imageUrl, index) in orderData.order_images" :key="index">
            <image :src="imageUrl" class="uploaded-image-preview" @click="previewImage(imageUrl)"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 充值凭证 -->
    <view class="info-section" v-if="showProofSection">
      <view class="section-title">
        <text>充值凭证</text>
        <text class="example-btn" @click="showExampleImage">查看示例图</text>
      </view>
     
      <view class="proof-upload" v-if="showProofSection">
        <!-- 选择类型 -->
        <view class="upload-type-selector">
          <text class="type-label">选择类型：</text>
          <view class="type-options">
            <view class="type-item active" @click="selectMediaType('image')">
              <view class="radio-circle checked"></view>
              <text class="type-text">图片</text>
            </view>
            <!-- <view class="type-item" @click="selectMediaType('video')">
              <view class="radio-circle"></view>
              <text class="type-text">视频</text>
            </view> -->
          </view>
        </view>
        
        <!-- 上传区域 -->
        <view class="upload-area">
          <view class="files-container">
            <!-- 已选择的文件列表 -->
            <view class="file-item" v-for="(item, index) in proofList" :key="index">
              <image v-if="item.type === 'image'" :src="item.url" class="file-preview" @click="previewImage(item.url)"></image>
              <video v-else-if="item.type === 'video'" :src="item.url" class="file-preview" controls></video>
              <view class="delete-btn" @click="removeFile(index)">×</view>
            </view>
            
            <!-- 添加按钮 - 当bus_status不为8时显示 -->
            <view class="add-file-btn" v-if="proofList.length < 3 && orderData && orderData.bus_status !== 8" @click="chooseMedia">
              <image src="/static/Images/common/Tianjiatupian.png" class="add-icon"></image>
              <text class="add-text">添加文件</text>
            </view>
          </view>
        </view>
        
        <!-- 注意事项 -->
        <view class="upload-tips">
          <text class="tips-content">注意：请上传正确凭证，如凭证上传错误，请更换正确凭证，<text class="highlight-text">最多上传3张凭证</text></text>
        </view>
      </view>
      <view class="proof-display" v-else-if="proofList.length > 0">
        <view class="proof-item" v-for="(item, index) in proofList" :key="index">
          <image v-if="item.type === 'image'" :src="item.url" class="proof-image" @click="previewImage(item.url)"></image>
          <video v-else :src="item.url" class="proof-video" controls></video>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <!-- 其他状态的按钮 -->
      <template v-if="orderStatus !== 8 ">
        <!-- 左列：放弃订单 -->
        <view class="button-column left">
          <button v-if="orderStatus !== 'success'" class="btn btn-danger" @click="abandonOrder">放弃订单</button>
          <button v-if="orderStatus === 'success'" class="btn btn-danger" @click="goToOrderList">前往领单</button>
        </view>
        
        <!-- 中列：原有提交按钮 -->
        <view class="button-column center">
          <button v-if="orderStatus === 'pending'" class="btn btn-primary" @click="reportNotReceived">充值未到账</button>
        </view>
        
        <!-- 右列：充值状态按钮 -->
        <view class="button-column right">
          <!-- <button v-if="orderStatus === 'pending'" class="btn btn-primary" @click="reportNotReceived">已充值未到账</button> -->
          <button v-if="orderStatus === 'failed' || orderStatus === 'pending'" class="btn btn-success" @click="confirmReceived">充值已到账</button>
          <button v-if="orderStatus === 'success'" class="btn btn-primary" @click="nextOrder">申请售后</button>
        </view>
      </template>
    </view>

    <!-- 弹窗组件 -->
    <uni-popup v-if="showStatusModal" ref="statusModal" type="center" :mask-click="false">
      <view class="modal-content">
        <view class="modal-icon">
          <image :src="modalIconSrc" class="modal-icon-img" mode="aspectFit"></image>
        </view>
        <view class="modal-title">{{ modalTitle }}</view>
        <view class="modal-desc" v-if="modalDesc">{{ modalDesc }}</view>
        <view class="modal-buttons">
          <button class="modal-btn" @click="closeModal">{{ modalButtonText }}</button>
        </view>
      </view>
    </uni-popup>

    <!-- 自定义确认弹窗 -->
    <uni-popup v-if="showCustomModal" ref="customModal" type="center" :mask-click="false">
      <view class="custom-modal-content" :style="{ backgroundImage: `url(${backgroundImages.modalBackground})` }">
        <view class="custom-modal-close" @click="closeCustomModal">×</view>
        <view class="custom-modal-icon">
          <image src="/static/Images/common/Xiaoxitongzhi.png" class="custom-modal-icon-img"></image>
        </view>
        <view class="custom-modal-title">确认订单状态为 <text class="highlight-orange">我已充</text>，<text class="highlight-orange">未到账</text></view>
        <view class="custom-modal-desc">请上传渠道"充值中"凭证，并在倒计时结束之前确认为到账。</view>
        <view class="custom-modal-buttons">
          <button class="custom-modal-btn" @click="confirmCustomModal">确认上报</button>
        </view>
      </view>
    </uni-popup>

    <!-- 确认放弃订单弹窗 -->
    <uni-popup v-if="showConfirmModal" ref="confirmModal" type="center" :mask-click="false">
      <view class="custom-modal-content" :style="{ backgroundImage: `url(${backgroundImages.modalBackground})` }">
        <view class="custom-modal-close" @click="closeConfirmModal">×</view>
        <view class="custom-modal-title">提示</view>
        <view class="custom-modal-desc">频繁放弃订单会影响做单荣誉<br/>您确定要放弃订单吗？</view>
        <view class="custom-modal-buttons">
          <button class="custom-modal-btn-cancel" @click="closeConfirmModal">取消</button>
          <button class="custom-modal-btn" @click="confirmAbandon">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 放弃订单结果弹窗 -->
    <uni-popup v-if="showAbandonModal" ref="abandonModal" type="center" :mask-click="false">
      <view class="custom-modal-content" :style="{ backgroundImage: `url(${backgroundImages.modalBackground})` }">
        <view class="custom-modal-close" @click="closeAbandonModal">×</view>
        <view class="custom-modal-icon">
          <image src="/static/Images/common/Shibai.png" class="custom-modal-icon-img"></image>
        </view>
        <view class="custom-modal-title">上报完成，该笔订单 <text class="highlight-orange">已失败</text></view>
        <view class="custom-modal-desc">是否继续领取订单？</view>
        <view class="custom-modal-buttons">
          <button class="custom-modal-btn-cancel" @click="closeAbandonModal">取消</button>
          <button class="custom-modal-btn" @click="confirmAbandonOrder">前往领单</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 充值已到账确认弹窗 -->
    <uni-popup v-if="showSuccessConfirmModal" ref="successConfirmModal" type="center" :mask-click="false">
      <view class="custom-modal-content" :style="{ backgroundImage: `url(${backgroundImages.modalBackground})` }">
        <view class="custom-modal-close" @click="closeSuccessConfirmModal">×</view>
        <view class="custom-modal-icon">
          <image src="/static/Images/common/Chenggong.png" class="custom-modal-icon-img"></image>
        </view>
        <view class="custom-modal-title">确认操作</view>
        <view class="custom-modal-desc">确认标记为充值已到账？</view>
        <view class="custom-modal-warning">请再次确认订单已成功。确认后无法再修改订单状态，充值金额/渠道不符或提前上报成功，订单视为假充，并计入风控处罚</view>
        <view class="custom-modal-buttons">
          <button class="custom-modal-btn-cancel" @click="closeSuccessConfirmModal">取消</button>
          <button class="custom-modal-btn" @click="confirmSuccess">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 示例图弹窗 -->
    <ExampleModal 
      :visible="showExampleModal" 
      :imageSrc="shilituImage"
      @close="closeExampleModal"
    />
    
    <!-- 渠道选择弹窗 -->
    <ChannelSelector 
      :visible="showChannelModal" 
      :defaultSelected="selectedChannelId"
      @close="closeChannelSelector"
      @confirm="onChannelConfirm"
    />
  </view>
</template>

<script>
import ExampleModal from '@/components/ExampleModal.vue'
import ChannelSelector from '@/components/ChannelSelector.vue'
import shilituImage from '/static/Images/common/Shilitu.png'
import { goodsApi, indexApi } from '@/utils/api.js'
import { getImageUrl } from '@/config/api.js'
import { userStorage } from '@/utils/storage.js'

export default {
  components: {
    ExampleModal,
    ChannelSelector
  },
  data() {
    return {
      orderId: '', // 订单ID
      orderData: {}, // 订单详情数据
      orderStatus: 'pending', // pending: 待上传凭证, failed: 上报失败, success: 上报成功
      orderInfo: {
        orderNo: '',
        orderType: '',
        createTime: '',
        finishTime: ''
      },
      rechargeInfo: {
        type: '',
        phone: '',
        amount: ''
      },
      proofList: [],      

      modalTitle: '',
      modalDesc: '',
      modalButtonText: '确定',
      modalType: 'success',
      showStatusModal: false,
      showCustomModal: false,
      showAbandonModal: false,
      showConfirmModal: false,
      showSuccessConfirmModal: false,
      showExampleModal: false,
      showChannelModal: false,
      selectedChannelId: '',
       platforms: [],
       uploadedImages: [], // 存储上传的图片地址
       shilituImage,
      loading: false,
      accountTypeName: '', // 存储匹配的账号类型名称
      channelList: [] // 存储渠道列表数据
    }
  },
  computed: {
    statusBarClass() {
      return {
        'status-pending': this.orderStatus === 'pending',
        'status-failed': this.orderStatus === 'failed',
        'status-success': this.orderStatus === 'success'
      }
    },
    statusIconSrc() {
      const iconMap = {
        pending: '/static/Images/common/Dengdai.png',
        failed: '/static/Images/common/Chenggong.png',
        success: '/static/Images/common/Chenggong.png'
      }
      return iconMap[this.orderStatus] || '/static/Images/common/Dengdai.png'
    },
    statusTitle() {
      const titleMap = {
        pending: '待上传凭证',
        failed: '订单已充值未到账上报成功',
        success: '订单已充值已到账上报成功'
      }
      return titleMap[this.orderStatus] || '待上传凭证'
    },
    statusDesc() {
      const descMap = {
        pending: '请按订单信息充值并上传支付成功的凭证',
        failed: '凭证已审核通过，等待订单充值到账',
        success: '凭证已审核通过，订单完成'
      }
      return descMap[this.orderStatus] || '请上传充值成功的凭证'
    },
    modalIconSrc() {
      const iconMap = {
        success: '/static/Images/common/Chenggong.png',
        error: '/static/Images/common/Shibai.png',
        info: '/static/Images/common/Xiaoxitongzhi.png'
      }
      return iconMap[this.modalType] || '/static/Images/common/Xiaoxitongzhi.png'
    },
    showProofSection() {
      return this.orderStatus !== 'success' || this.proofList.length > 0
    },
    actionButtonText() {
      const textMap = {
        pending: '提交凭证',
        failed: '到账凭证',
        success: '已完成'
      }
      return textMap[this.orderStatus] || '提交凭证'
    },
    modalIconSrc() {
      const iconMap = {
        success: '/static/Images/common/Chenggong.png',
        error: '/static/Images/common/Shibai.png',
        warning: '/static/Images/common/Dengdai.png'
      }
      return iconMap[this.modalType] || '/static/Images/common/Chenggong.png'
    },
    backgroundImages() {
      return {
        modalBackground: getImageUrl('/static/Images/common/Tanchuangbeijing.png')
      }
    }
  },
  onLoad(options) {
    // 获取URL参数中的订单ID
    this.orderId = options.id || '';
    console.log('订单ID:', this.orderId);
    
    // 获取订单ID
    this.orderId = options.orderId || options.id
    if (this.orderId) {
      // 获取订单详情
      this.getOrderDetail(this.orderId)
    } else {
      uni.showToast({
        title: '订单ID不能为空',
        icon: 'error'
      })
    }
  },
  methods: {
    // 获取订单详情
    async getOrderDetail(orderId) {
      try {
        this.loading = true
        console.log('获取订单详情:', orderId)
        
        const response = await goodsApi.userOrderInfo(orderId)
        console.log('订单详情响应:', response)
        
        if (response && response.data) {
          // 验证订单的bus_id是否等于当前用户id
          const currentUser = userStorage.getUserInfo()
          console.log('当前用户信息:', currentUser)
          console.log('订单数据:', response.data)
          console.log('订单bus_id:', response.data.bus_id)
          console.log('当前用户id:', currentUser ? currentUser.id : 'null')
          
          // 验证订单是否分配给当前用户
          if (currentUser && currentUser.id) {
            // 转换为字符串进行比较，避免数据类型问题
            const orderBusId = String(response.data.bus_id || 0)
            const userId = String(currentUser.id)
            
            console.log(`比较: 订单bus_id="${orderBusId}" vs 用户id="${userId}"`)
            
            if (orderBusId !== userId) {
              console.log('订单未分配给当前用户，跳转到抢单页面')
              
              // 根据订单类型确定跳转页面
              const orderType = response.data.type
              let redirectUrl = ''
              
              if (orderType === 3) {
                redirectUrl = '/pages/tasks/rightsorder'
                console.log('订单类型为3，跳转到权益订单页面')
              } else if (orderType === 1) {
                redirectUrl = '/pages/tasks/billorder'
                console.log('订单类型为1，跳转到账单订单页面')
              } else {
                // 默认跳转到账单订单页面
                redirectUrl = '/pages/tasks/billorder'
                console.log(`订单类型为${orderType}，默认跳转到账单订单页面`)
              }
              
              uni.showToast({
                title: '该订单已放弃，请重新抢单',
                icon: 'none',
                duration: 2000
              })
              
              // 延迟跳转，让用户看到提示信息
              setTimeout(() => {
                uni.redirectTo({
                  url: redirectUrl
                })
              }, 2000)
              return
            } else {
              console.log('订单验证通过，用户有权限查看此订单')
            }
          } else {
            console.log('用户未登录，跳过验证')
          }
          
          this.orderData = response.data
          this.updateOrderInfo(response.data)
          // 获取渠道列表数据
          await this.loadChannelList()
        } else {
          throw new Error('获取订单详情失败')
        }
      } catch (error) {
        console.error('获取订单详情失败:', error)
        uni.showToast({
          title: error.message || '获取订单详情失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 更新订单信息
    updateOrderInfo(data) {
      // 更新基本订单信息
      // 优先使用list中的bus_price作为可结算金额
      let settlementAmount = '0.00';
      if (data.list && data.list.length > 0 && data.list[0].bus_price) {
        settlementAmount = data.list[0].bus_price;
      } else {
        settlementAmount = data.settlement_amount || data.bus_price || '0.00';
      }
      
      this.orderInfo = {
        orderNo: data.order_no || '',
        orderType: this.getOrderTypeText(data.type),
        settlementAmount: `￥${settlementAmount}`,
        createTime: this.formatTime(data.create_time),
        finishTime: data.end_time ? this.formatTime(data.end_time) : '--'
      }
      
      // 更新充值信息（从订单商品列表中获取）
      if (data.list && data.list.length > 0) {
        const firstItem = data.list[0]
        this.rechargeInfo = {
          accountType: firstItem.goods_name || '移动',
          platform: '【微信小程序】手机充值',
          phone: firstItem.accounts || '',
          details: data.type === 1 ? 
            `${firstItem.goods_name || '移动'} | ${firstItem.address} | ${firstItem.carrier} | ${data.list[0].bus_price || '100'}` :
            data.type === 3 ? 
            `${firstItem.goods_name || '移动'} | 账号类型待匹配 | ${data.list[0].bus_price || '100'}` :
            `${firstItem.goods_name || '移动'} | ${firstItem.address} | ${data.list[0].bus_price || '100'}`,
          channel: data.channel || { channel: '未知渠道' }, // 添加渠道信息
          firstItem: firstItem, // 保存firstItem数据用于模板显示
          orderType: data.type // 保存订单类型
        }
        
        // 设置选中的渠道ID
        if (data.channel && data.channel.id) {
          this.selectedChannelId = data.channel.id;
        }
        
        // 如果是type=3的订单，需要获取账号类型数据进行匹配
        if (data.type === 3 && firstItem.temp_id) {
          this.fetchAccountTypeData(firstItem.temp_id)
        }
      }
      
      // 根据订单状态更新页面状态
      this.updateOrderStatus(data.status, data.bus_status)
    },
    
    // 获取订单类型文本
    getOrderTypeText(type) {
      const typeMap = {
        1: '话费充值',
        2: '卡密充值',
        3: '权益充值'
      }
      return typeMap[type] || '未知类型'
    },
    
    // 格式化时间戳
    formatTime(timestamp) {
      if (!timestamp) return '--'
      const date = new Date(timestamp * 1000)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    // 加载渠道列表数据
    async loadChannelList() {
      try {
        const response = await goodsApi.channelList()
        if (response && response.data) {
          this.channelList = response.data
        }
      } catch (error) {
        console.error('获取渠道列表失败:', error)
      }
    },
    
    // 根据渠道ID获取渠道名称
    getChannelName(channelId) {
      if (!channelId || !this.channelList || this.channelList.length === 0) {
        return '未设置'
      }
      const channel = this.channelList.find(item => item.id == channelId)
      return channel ? channel.channel : '未知渠道'
    },
    
    // 更新订单状态
    updateOrderStatus(status, busStatus) {
      // 根据订单状态和商户状态确定页面显示状态
      if (busStatus === 0) {
        this.orderStatus = 'pending' // 未充值
      } else if (busStatus === 8) {
        this.orderStatus = 'success' // 充值已到账
      } else if (busStatus === 7) {
        this.orderStatus = 'failed' // 充值未到账
      }
    },
    
    // 选择媒体文件
    chooseMedia() {
      const remainingCount = 3 - this.proofList.length;
      if (remainingCount <= 0) {
        uni.showToast({
          title: '最多只能选择3个文件',
          icon: 'none'
        });
        return;
      }
      
      // H5环境下使用chooseImage，其他环境使用chooseMedia
      // #ifdef H5
      if (this.selectedType === 'video') {
        uni.showToast({
          title: 'H5环境暂不支持视频选择',
          icon: 'none'
        });
        return;
      }
      
      uni.chooseImage({
        count: remainingCount,
        sourceType: ['album', 'camera'],
        success: async (res) => {
          for (const filePath of res.tempFilePaths) {
            try {
              this.loading = true;
              
              // 调用上传接口
              const uploadUrl = await this.uploadFile(filePath);
              
              this.proofList.push({
                 type: 'image',
                 url: uploadUrl, // 使用上传后的网络地址
                 size: 0
               });
               
               // 保存上传的图片地址
               this.uploadedImages.push(uploadUrl);
               console.log('当前uploadedImages数组:', this.uploadedImages);
               console.log('images参数值:', this.uploadedImages);
              
              this.loading = false;
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              });
            } catch (error) {
              this.loading = false;
              console.error('上传失败:', error);
              uni.showToast({
                title: '上传失败',
                icon: 'none'
              });
            }
          }
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
        }
      })
      // #endif
      
      // #ifndef H5
       uni.chooseMedia({
         count: remainingCount,
         mediaType: [this.selectedType],
         sourceType: ['album', 'camera'],
         success: async (res) => {
           console.log('选择媒体成功:', res);
           for (const file of res.tempFiles) {
             // 检查文件大小（可选）
             if (file.size > 10 * 1024 * 1024) { // 10MB限制
               uni.showToast({
                 title: '文件大小不能超过10MB',
                 icon: 'none'
               });
               continue;
             }
             
             // 如果是图片，自动上传
             if (file.fileType === 'image') {
               try {
                 this.loading = true;
                 
                 // 调用上传接口
                 const uploadUrl = await this.uploadFile(file.tempFilePath);
                 
                 this.proofList.push({
                    url: uploadUrl, // 使用上传后的网络地址
                    type: 'image',
                    size: file.size
                  });
                  
                  // 保存上传的图片地址
                  this.uploadedImages.push(uploadUrl);
                  console.log('当前uploadedImages数组:', this.uploadedImages);
                  console.log('images参数值:', this.uploadedImages);
                 
                 this.loading = false;
                 uni.showToast({
                   title: '上传成功',
                   icon: 'success'
                 });
               } catch (error) {
                 this.loading = false;
                 console.error('上传失败:', error);
                 uni.showToast({
                   title: '上传失败',
                   icon: 'none'
                 });
               }
             } else {
               // 视频文件直接添加到列表（不上传）
               this.proofList.push({
                 url: file.tempFilePath,
                 type: file.fileType,
                 size: file.size
               });
             }
           }
         },
         fail: (err) => {
           console.error('选择媒体失败:', err);
         }
       });
       // #endif
    },
    
    // 删除文件
     removeFile(index) {
       this.proofList.splice(index, 1);
     },
     
     // 预览图片
     previewImage(url) {
       uni.previewImage({
         current: url,
         urls: this.proofList.filter(item => item.type === 'image').map(item => item.url)
       });
     },
    
    // 选择媒体类型
     selectMediaType(type) {
       this.selectedType = type;
       // 清空已选择的文件，因为切换了类型
       this.proofList = [];
     },
     
     // 显示渠道选择弹窗
     async showChannelSelector() {
       try {
         // 获取渠道数据
         const response = await goodsApi.channelList();
         if (response && response.data) {
           this.platforms = response.data;
         }
         this.showChannelModal = true;
       } catch (error) {
         console.error('获取渠道列表失败:', error);
         uni.showToast({
           title: '获取渠道列表失败',
           icon: 'none'
         });
       }
     },
     
     // 关闭渠道选择弹窗
     closeChannelSelector() {
       this.showChannelModal = false;
     },
     
     // 确认选择渠道
     onChannelConfirm(channelId) {
       this.selectedChannelId = channelId;
       // 根据选择的渠道ID更新页面显示的渠道名称
       const selectedChannel = this.platforms.find(platform => platform.id === channelId);
       if (selectedChannel) {
         this.rechargeInfo.platform = selectedChannel.name || selectedChannel.title || selectedChannel.channel;
         // 更新渠道信息以正确显示在模板中
         this.rechargeInfo.channel = {
           channel: selectedChannel.name || selectedChannel.title || selectedChannel.channel,
           id: channelId
         };
         // 同时更新orderData.list[0].channel_ids以便getChannelName方法能正确获取
         if (this.orderData.list && this.orderData.list[0]) {
           this.orderData.list[0].channel_ids = channelId;
         }
       }
       console.log('选择的渠道ID:', channelId);
       console.log('更新后的渠道信息:', this.rechargeInfo.channel);
     },
    
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    },
    
    // 重新提交凭证
    resubmitProof() {
      this.proofList = []
      this.orderStatus = 'pending'
    },
    
    // 显示弹窗
    showModal(type, title, desc = '', buttonText = '确定') {
      this.modalType = type
      this.modalTitle = title
      this.modalDesc = desc
      this.modalButtonText = buttonText
      this.showStatusModal = true
      this.$nextTick(() => {
        try {
          if (this.$refs?.statusModal && typeof this.$refs.statusModal.open === 'function') {
            this.$refs.statusModal.open()
          }
        } catch (error) {
          console.error('打开状态模态框失败:', error);
        }
      })
    },
    
    // 关闭弹窗
    closeModal() {
      try {
        if (this.$refs?.statusModal && typeof this.$refs.statusModal.close === 'function') {
          this.$refs.statusModal.close()
        }
      } catch (error) {
        console.error('关闭状态模态框失败:', error);
      }
      this.showStatusModal = false
    },
    
    // 显示示例图
    showExampleImage() {
      this.showExampleModal = true
    },
    
    // 关闭示例图弹窗
    closeExampleModal() {
      this.showExampleModal = false
    },
    
    // 放弃订单
    abandonOrder() {
      this.showConfirmModal = true
      this.$nextTick(() => {
        try {
          if (this.$refs?.confirmModal && typeof this.$refs.confirmModal.open === 'function') {
            this.$refs.confirmModal.open()
          }
        } catch (error) {
          console.error('打开确认模态框失败:', error);
        }
      })
    },
    
    // 关闭确认弹窗
    closeConfirmModal() {
      this.showConfirmModal = false
      try {
        if (this.$refs?.confirmModal && typeof this.$refs.confirmModal.close === 'function') {
          this.$refs.confirmModal.close()
        }
      } catch (error) {
        console.error('关闭确认模态框失败:', error);
      }
    },
    
    // 确认放弃订单 - 调用接口更新订单状态
    async confirmAbandon() {
      this.closeConfirmModal()
      
      try {
        this.loading = true
        
        // 调用放弃订单接口
        const response = await goodsApi.abandonOrder({
          order_id: this.orderId
        })
        
        console.log('放弃订单响应:', response)
        
        if (response && (response.success || response.code === 1 || response.code === '1')) {
          // 显示成功弹窗
          this.showAbandonModal = true
          this.$nextTick(() => {
            try {
              if (this.$refs?.abandonModal && typeof this.$refs.abandonModal.open === 'function') {
                this.$refs.abandonModal.open()
              }
            } catch (error) {
              console.error('打开放弃订单模态框失败:', error);
            }
          })
        } else {
          throw new Error(response?.msg || '放弃订单失败')
        }
      } catch (error) {
        console.error('放弃订单失败:', error)
        uni.showToast({
          title: error.message || '放弃订单失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 关闭放弃订单弹窗
    async closeAbandonModal() {
      this.showAbandonModal = false
      try {
        if (this.$refs?.abandonModal && typeof this.$refs.abandonModal.close === 'function') {
          this.$refs.abandonModal.close()
        }
      } catch (error) {
        console.error('关闭放弃订单模态框失败:', error);
      }
      
      // 刷新订单详情以同步状态
      await this.getOrderDetail(this.orderId)
    },
    
    // 确认放弃订单
    async confirmAbandonOrder() {
        // 刷新订单详情以同步状态
        await this.getOrderDetail(this.orderId)
        
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/task/index'
          })
        }, 500)
    },
    
    // 已充值未到账
    async reportNotReceived() {
      if (this.uploadedImages.length === 0) {
        uni.showToast({
          title: '请先上传凭证图片',
          icon: 'none'
        });
        return;
      }
      
      // 显示自定义弹窗
      this.showCustomModal = true;
      this.$nextTick(() => {
        try {
          if (this.$refs?.customModal && typeof this.$refs.customModal.open === 'function') {
            this.$refs.customModal.open();
          }
        } catch (error) {
          console.error('打开自定义模态框失败:', error);
        }
      });
    },
    
    // 关闭自定义弹窗
    closeCustomModal() {
      try {
        if (this.$refs?.customModal && typeof this.$refs.customModal.close === 'function') {
          this.$refs.customModal.close();
        }
      } catch (error) {
        console.error('关闭自定义模态框失败:', error);
      }
      this.showCustomModal = false;
    },
    
    // 确认自定义弹窗
    async confirmCustomModal() {
      this.closeCustomModal();
      
      try {
        this.loading = true;
        
        // 调用API更新订单状态
        const response = await goodsApi.changeOrdersType({
          order_id: this.orderId,
          bus_status: 7,
          images: this.uploadedImages,
          channel_id: this.selectedChannelId // 渠道ID
        });
        
        this.loading = false;
        
        if (response && ((response.success === true) || ([0, 1, 200, '0', '1', '200'].includes(response.code)))) {
          // 重新获取订单详情
          await this.getOrderDetail(this.orderId);
          
          // 显示成功提示
          this.modalType = 'success';
          this.modalTitle = '上报成功';
          this.modalDesc = response.msg || response.message || '订单状态已更新为充值未到账';
          this.showStatusModal = true;
          this.$nextTick(() => {
            try {
              if (this.$refs?.statusModal && typeof this.$refs.statusModal.open === 'function') {
                this.$refs.statusModal.open();
              }
            } catch (error) {
              console.error('打开状态模态框失败:', error);
            }
          });
          
          // 更新订单状态
          this.orderStatus = 'failed';
        } else {
          throw new Error(response?.msg || '上报失败');
        }
      } catch (error) {
        this.loading = false;
        console.error('上报失败:', error);
        uni.showToast({
          title: error.message || '上报失败',
          icon: 'error'
        });
      }
    },
    
    // 提交凭证
    submitProof() {
      if (this.proofList.length === 0) {
        uni.showToast({
          title: '请先上传凭证',
          icon: 'error'
        })
        return
      }
      
      this.showModal('success', '提交成功', '凭证已提交，等待审核')
      setTimeout(() => {
        this.orderStatus = 'success'
        this.closeModal()
      }, 2000)
    },
    
    // 上传文件
     async uploadFile(filePath) {
       try {
         const response = await indexApi.uploadFile(filePath, 'file');
         console.log('上传接口返回数据:', response);
         
         // 从返回数据中获取图片地址
         const uploadUrl =response.data?.save_path || response;
         console.log('提取的图片地址:', uploadUrl);
         
         return uploadUrl;
       } catch (error) {
         console.error('上传文件失败:', error);
         throw error;
       }
     },
    
    // 充值已到账
    async confirmReceived() {
      if (this.uploadedImages.length === 0) {
        uni.showToast({
          title: '请先上传凭证图片',
          icon: 'none'
        });
        return;
      }
      
      // 显示确认弹窗
      this.showSuccessConfirmModal = true;
      this.$nextTick(() => {
        this.$refs.successConfirmModal.open();
      });
    },
    
    // 关闭成功确认弹窗
    closeSuccessConfirmModal() {
      this.showSuccessConfirmModal = false;
      this.$refs.successConfirmModal.close();
    },
    
    // 确认充值已到账
    async confirmSuccess() {
      this.closeSuccessConfirmModal();
      
      try {
        this.loading = true;
        
        // 调用API更新订单状态
        const response = await goodsApi.changeOrdersType({
          order_id: this.orderId,
          images: this.uploadedImages, // 图片数组
          bus_status: 8, // 充值已到账
          channel_id: this.selectedChannelId // 渠道ID
        });
        
        this.loading = false;
        
        // 根据接口返回状态处理弹窗
        if (response && ((response.success === true) || ([0, 1, 200, '0', '1', '200'].includes(response.code)))) {
          // 成功情况 - 先刷新订单数据
          await this.getOrderDetail(this.orderId);
          
          this.modalType = 'success';
          this.modalTitle = '充值已到账确认成功';
          this.modalDesc = response.msg || response.message || '';
          this.showStatusModal = true;
          this.$nextTick(() => {
            this.$refs.statusModal.open();
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } else {
          // 失败情况
          this.modalType = 'error';
          this.modalTitle = '操作失败';
          this.modalDesc = response.msg || response.message || '充值确认失败，请重试';
          this.showStatusModal = true;
          this.$nextTick(() => {
            this.$refs.statusModal.open();
          });
        }
        
      } catch (error) {
        this.loading = false;
        console.error('更新订单状态失败:', error);
        
        // 显示错误弹窗
        this.modalType = 'error';
        this.modalTitle = '操作失败';
        this.modalDesc = error.message || '网络错误，请重试';
        this.showStatusModal = true;
        this.$nextTick(() => {
          this.$refs.statusModal.open();
        });
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 前往领单
    goToOrderList() {
      uni.navigateTo({
        url: '/pages/task/index'
      });
    },
    
    // 下一笔订单
    nextOrder() {
      uni.navigateTo({
        url: '/pages/order/billorder'
      });
    },
    
    // 获取账号类型数据
      async fetchAccountTypeData(tempId) {
        try {
          const response = await goodsApi.getGoodsTemps();
          if (response && response.data && Array.isArray(response.data)) {
            // 遍历返回的数据，查找匹配的temp_list
            for (const item of response.data) {
              if (item.temp_list && Array.isArray(item.temp_list)) {
                const matchedType = item.temp_list.find(temp => temp.id === tempId);
                if (matchedType) {
                  this.accountTypeName = matchedType.name;
                  // 同时更新details字段
                  if (this.rechargeInfo.firstItem) {
                    const firstItem = this.rechargeInfo.firstItem;
                    const busPrice = firstItem.bus_price || '100';
                    this.rechargeInfo.details = `${firstItem.goods_name || '移动'} | ${matchedType.name} | ${busPrice}`;
                  }
                  return;
                }
              }
            }
            this.accountTypeName = '未知类型';
            // 如果没有匹配到，更新为未知类型
            if (this.rechargeInfo.firstItem) {
              const firstItem = this.rechargeInfo.firstItem;
              const busPrice = firstItem.bus_price || '100';
              this.rechargeInfo.details = `${firstItem.goods_name || '移动'} | 未知类型 | ${busPrice}`;
            }
          }
        } catch (error) {
          console.error('获取账号类型数据失败:', error);
          this.accountTypeName = '未知类型';
          // 错误情况下也要更新details
          if (this.rechargeInfo.firstItem) {
            const firstItem = this.rechargeInfo.firstItem;
            const busPrice = firstItem.bus_price || '100';
            this.rechargeInfo.details = `${firstItem.goods_name || '移动'} | 未知类型 | ${busPrice}`;
          }
        }
      }
  }
}
</script>

<style lang="scss" scoped>
.merchant-order-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .header-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  .header-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .header-right {
    width: 60rpx;
    height: 60rpx;
  }
}

.loading-container {
  position: fixed;
  top: 88rpx;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.status-bar {
  background: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  
  .status-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    .status-icon-img {
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  .status-text {
    flex: 1;
    
    .status-title {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .status-desc {
      display: block;
      font-size: 28rpx;
      color: #666;
    }
  }
  
  &.status-pending {
    .status-icon {
      background: #e6f7ff;
    }
  }
  
  &.status-failed {
    .status-icon {
      background: #fff2f0;
    }
  }
  
  &.status-success {
    .status-icon {
      background: #f6ffed;
    }
  }
}

.info-section {
  background: #fff;
  margin-bottom: 20rpx;
  
  .section-title {
    padding: 30rpx;
    font-size: 26rpx;
    font-weight: 600;
    color: #333;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    
    .example-btn {
      font-size: 18rpx;
      color: #1890ff;
      font-weight: normal;
      margin-left: 10rpx;
      cursor: pointer;
    }
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    min-height: 80rpx;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    
    .info-value {
       font-size: 28rpx;
       color: #333;
       text-align: left;
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       margin-left: 20rpx;
       
       &.order-id {
         justify-content: space-between;
       }
       
       &.settlement-amount {
         color: #ff6b35;
         font-weight: bold;
       }
     }
  }
  
  .recharge-info {
    padding: 0 30rpx 20rpx;
    
    .recharge-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      
      .recharge-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .recharge-value {
         font-size: 28rpx;
         color: #333;
         text-align: left !important;
         flex: 1;
         margin-left: 20rpx;
         
         &.recharge-amount {
           color: #ff4d4f;
           font-weight: 600;
         }
       }
    }
  }
}

.order-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.copy-icon {
  width: 38rpx;
  height: 38rpx;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  opacity: 0.6;
  float: right;
}

.settlement-amount {
  color: #ff6b35;
  font-weight: bold;
}

.platform-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.platform-tag {
  background-color: #e8f4fd;
  color: #1890ff;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.modify-btn {
  color: #999;
  font-size: 24rpx;
  padding: 8rpx 26rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  background-color: #f5f5f5;
  margin-left: 1rem;
}

.platform-tip {
  margin: 16rpx 0;
  padding: 16rpx 24rpx;
  background-color: #fff7e6;
  border-radius: 8rpx;
}

.tip-text {
  color: #fa8c16;
  font-size: 24rpx;
}

.account-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
}



.proof-upload {
  padding: 30rpx;
  
  .upload-type-selector {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .type-label {
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
    }
    
    .type-options {
      display: flex;
      align-items: center;
      
      .type-item {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        cursor: pointer;
        
        .radio-circle {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid #d9d9d9;
          border-radius: 50%;
          margin-right: 12rpx;
          position: relative;
          
          &.checked {
            border-color: #ff4d4f;
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 16rpx;
              height: 16rpx;
              background: #ff4d4f;
              border-radius: 50%;
            }
          }
        }
        
        .type-text {
          font-size: 28rpx;
          color: #333;
        }
        
        &.active .type-text {
          color: #ff4d4f;
        }
      }
    }
  }
  
  .upload-area {
       padding: 30rpx;
       border: 2rpx dashed #d9d9d9;
       border-radius: 12rpx;
       background: #fafafa;
       margin: 30rpx 0;
       
       .files-container {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 20rpx;
          flex-wrap: nowrap;
          overflow-x: auto;
         
         .file-item {
           position: relative;
           width: 160rpx;
           height: 200rpx;
           border-radius: 8rpx;
           overflow: hidden;
           flex-shrink: 0;
           
           .file-preview {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 8rpx;
           }
           
           .delete-btn {
             position: absolute;
             top: -8rpx;
             right: -8rpx;
             width: 36rpx;
             height: 36rpx;
             background: #ff4d4f;
             color: #fff;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 20rpx;
             font-weight: bold;
             z-index: 10;
           }
         }
       }
      
      .add-file-btn {
         display: inline-flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         width: 160rpx;
         height: 200rpx;
         border: 2rpx dashed #ccc;
         border-radius: 8rpx;
         background: #fff;
         cursor: pointer;
         flex-shrink: 0;
        
        .add-icon {
          width: 60rpx;
          height: 60rpx;
          opacity: 0.6;
          margin-bottom: 10rpx;
        }
        
        .add-text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  
  .upload-tips {
    margin-top: 20rpx;
    
    .tips-content {
      font-size: 24rpx;
      color: #666;
      line-height: 1.5;
      
      .highlight-text {
        color: #ff6b35;
      }
    }
  }
}

.proof-display {
  padding: 30rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .proof-item {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    overflow: hidden;
    
    .proof-image,
    .proof-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.uploaded-proof-section {
  margin-top: 30rpx;
  
  .uploaded-images-container {
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .uploaded-image-item {
      width: 160rpx;
      height: 200rpx;
      border-radius: 8rpx;
      overflow: hidden;
      flex-shrink: 0;
      
      .uploaded-image-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8rpx;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rpx;
  
  .btn {
    width: 100%;
    border-radius: 44rpx;
    font-size: 28rpx;
    border: none;
    
    &.btn-primary {
      background: #ff4d4f;
      color: #fff;
    }
    
    &.btn-disabled {
      background: #f5f5f5;
      color: #bfbfbf;
    }
    
    &.btn-danger {
      background: #bfbfbf;
      color: #fff;
    }
    
    &.btn-warning {
      background: #faad14;
      color: #fff;
    }
    
    &.btn-success {
      background: #52c41a;
      color: #fff;
    }
    
    &.btn-secondary {
      background: #f5f5f5;
      color: #666;
      border: 1rpx solid #d9d9d9;
    }
  }
}

.button-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  
  &.left {
    align-items: flex-start;
  }
  
  &.center {
    align-items: center;
  }
  
  &.right {
    align-items: flex-end;
  }
}

.modal-content {
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx 40rpx;
  text-align: center;
  width: 600rpx;
  position: relative;
  z-index: 999;
  margin: 0 auto;
  
  .modal-icon {
    margin-bottom: 30rpx;
    
    .modal-icon-img {
      width: 80rpx;
      height: 80rpx;
    }
    
    .iconfont {
      font-size: 80rpx;
    }
  }
  
  .modal-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .modal-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 40rpx;
  }
  
  .modal-buttons {
    .modal-btn {
      width: 200rpx;
      height: 72rpx;
      background: #ff4d4f;
      color: #fff;
      border: none;
      border-radius: 36rpx;
      font-size: 28rpx;
    }
  }
}

/* 自定义弹窗样式 */
.custom-modal-content {
  width: 600rpx;
  background-size: cover;
  background-position: center;
  border-radius: 20rpx;
  padding: 60rpx 40rpx 40rpx;
  position: relative;
  text-align: center;
  border: 4rpx solid #4A90E2;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.custom-modal-close {
  position: absolute;
  top: 20rpx;
  right: 30rpx;
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

.custom-modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.custom-modal-icon-img {
  width: 80rpx;
  height: 80rpx;
}

.custom-modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.highlight-orange {
  color: #FF6B35;
  font-weight: bold;
}

.custom-modal-desc {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.custom-modal-warning {
  font-size: 24rpx;
  color: #ff4d4f;
  text-align: left;
  margin-bottom: 40rpx;
  line-height: 1.6;
  padding: 0 20rpx;
  background: #fff2f0;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #ff4d4f;
  
}

.custom-modal-buttons {
  display: flex;
  justify-content: center;
}

.custom-modal-btn {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(135deg, #FF4757, #FF3742);
  color: white;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.3);
  transition: all 0.3s ease;
}

.custom-modal-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 15rpx rgba(255, 71, 87, 0.4);
}

.custom-modal-btn-cancel {
  flex: 1;
  height: 80rpx;
  background: #F5F5F5;
  border-radius: 40rpx;
  color: #666;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.custom-modal-btn-cancel:active {
  background: #E8E8E8;
}

.custom-modal-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}


</style>